<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item v-if="hasFather">
          <div class="iconfont icon-return return-btn" @click="returnFun" title="返回">{{ organizationName }}</div>
        </el-form-item>
        <!-- <el-form-item v-if="isMuilUnitUser">
          <el-select filterable @change="getList(1)" v-model="formInline.orgIds">
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-input 
          v-model.trim="formInline.name" 
          placeholder="请输入预案名称"
          @keyup.enter.native="getList(1)"
          clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="addPlan()">新增</el-button>
      </div>
    </el-row>
    <el-row class="overview-wrap" :gutter="40">
        <el-col :span="12">
          <div class="item-wrap">
              <p class="item-value color-3">{{ staticObj.total || 0}}</p>
              <p class="item-title">预案总数</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-wrap">
              <p class="item-value color-5">{{ staticObj.lastUpdateTime || '-'}}</p>
              <p class="item-title">最近一次更新时间</p>
          </div>
        </el-col>
      </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%">
      <el-table-column
      label="序号"
      type="index"
      width="50">
      </el-table-column>
      <el-table-column
      prop="orgName"
      label="业主单位">
      </el-table-column>
      <el-table-column
      prop="name"
      label="预案名称">
      </el-table-column>
      <el-table-column
      prop="levelName"
      label="等级">
      </el-table-column>
      <el-table-column
      prop="typeName"
      label="类型">
      </el-table-column>
      <el-table-column
      prop="createName"
      label="创建人">
      </el-table-column>
      <el-table-column
      prop="createTime"
      label="创建时间">
      </el-table-column>
      <el-table-column
      prop="updateTime"
      label="最近一次编辑时间">
      </el-table-column>
      <el-table-column 
      label="操作"
      width="140">
        <template slot-scope="scope">
          <el-button  @click="showDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
          <span class="dividing-line">|</span>
          <el-button  @click="addPlan(scope.$index, scope.row)" type="text" size="small">修改</el-button>
          <span class="dividing-line">|</span>
          <el-button  @click="delPlan(scope.$index, scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
      <!-- 展开详情 -->
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <span style="display:none;">{{freashFlag}}</span> 
          <div class="detail-content ql-snow">
            <p><b>业主单位：</b>{{scope.row.orgName}}</p>
            <p><b>预案名称：</b>{{scope.row.name}}</p>
            <p><b>等级：</b>{{scope.row.levelName}}</p>
            <p><b>类型：</b>{{scope.row.typeName}}</p>
            <p><b>创建人：</b>{{scope.row.createName}}</p>
            <p><b>创建时间：</b>{{scope.row.createTime}}</p>
            <p><b>应急人员：</b><template v-if="detailDealObj[scope.row.id] && detailDealObj[scope.row.id].length>0"><span v-for="(item,index) in detailDealObj[scope.row.id]" :key="index">{{item.groupName + ' - ' +item.dutyName+'；'}}</span></template></p>
            <p><b>预案流程：</b><div class="ql-editor" v-html="scope.row.flowContent"></div></p>
            <p v-if="scope.row.leaderTaskContent"><b>现场指挥小组分工：</b><div class="ql-editor" v-html="scope.row.leaderTaskContent"></div></p>
            <p v-if="scope.row.conductionTaskContent"><b>信息传导小组分工：</b><div class="ql-editor" v-html="scope.row.conductionTaskContent"></div></p>
            <p v-if="scope.row.battleTaskContent"><b>灭火战斗小组分工：</b><div class="ql-editor" v-html="scope.row.battleTaskContent"></div></p>
            <p v-if="scope.row.evacuateTaskContent"><b>引导疏散小组分工：</b><div class="ql-editor" v-html="scope.row.evacuateTaskContent"></div></p>
            <p v-if="scope.row.safetyalertTaskContent"><b>安全警戒小组分工：</b><div class="ql-editor" v-html="scope.row.safetyalertTaskContent"></div></p>
            <p v-if="scope.row.logisticsTaskContent"><b>后勤救护小组分工：</b><div class="ql-editor" v-html="scope.row.logisticsTaskContent"></div></p>
            <p v-if="scope.row.taskContent"><b>其他小组分工：</b><div class="ql-editor" v-html="scope.row.taskContent"></div></p>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="formInline.currentPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal">
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="预案维护"
      width="1000px"
      top='10vh'
      v-if="dialogFalg"
      :visible.sync="dialogFalg"
      @close="closeDialog"
      v-dialogDrag>
      <edit-form :editInfo="editInfo" :closeDialog="closeDialog"></edit-form>
    </el-dialog>
  </div>
</template>

<script>
import { selectEmergencyPlanInfo,getCountEmergencyPlanUnit,saveEmergencyPlanInfo,delEmergencyPlan,selectEmergencyPlanDetail} from '@/api/plan'
import { getOrgList} from '@/api/org'
import util from '@/utils/util'
import editForm from '../Dialog/EmergencyPlanForm'

export default {
  name: 'EmergencyPlanList',
  props: {
      organizationId: {
          required: true
      },
      organizationName: {
          default () {
            return ''
          }
      },
      hasFather: {
          type: Boolean,
          default () {
              return false
          }
      },
      returnFun: {
          type: Function,
          default () {
              return ()=>{}
          }
      }
  },
  components: { 
    editForm
  },
  data () {
    return {
      formInline: {
        orgIds:/* this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds  */this.organizationId || this.$store.state.userinfo.org.id,
        name:'',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [],//表格数据
      staticObj:{},//头部各状态个数统计
      detailDealObj:{},//展开详情中
      freashFlag:0,
      loading: false,
      orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "请选择单位"}],
      dialogFalg: false,
      editInfo: {  }// 编辑对应的表单信息
    }
  },
  created:function() {
      //绑定下拉框
      /* if(this.isMuilUnitUser){
        getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
        }) 
      } */
      this.getList(1, 10, true)
  },
  methods: {
    sizeChange(_pageSize) {//页码切换
      this.getList(1,_pageSize) 
    },
    pageChange(_pageIndex) {//翻页
      this.getList(_pageIndex) 
    },
    getList(_pageIndex, _pageSize, refresh) {//获取列表
      if(_pageIndex){
        this.formInline.currentPageIndex = _pageIndex
      }
      if(_pageSize){
          this.formInline.currentPageSize = _pageSize
      }
      this.loading =true;
      selectEmergencyPlanInfo({
        planName:this.formInline.name,
        orgIds: this.formInline.orgIds,
        pageIndex: this.formInline.currentPageIndex -1,
        pageSize: this.formInline.currentPageSize,
      }).then((result) => {
        this.formInline.currentPageTotal = result.total;
        if(refresh) {
          this.staticObj.total = result.total
          this.staticObj.lastUpdateTime =result.total>0?result.data[0].updateTime:''
        }
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    showDetail(index, row) {//展开详情
      const $table = this.$refs.mainTable
      row.isExpand = !row.isExpand;//给row一个自定义展开状态
      $table.toggleRowExpansion(row)
      if(row.isExpand){
        let that = this
        that.loading = true
        selectEmergencyPlanDetail({planId:row.id}).then((data)=>{
          that.loading = false
          that.detailDealObj[row.id] = data.data.members
          that.freashFlag++
        })
      }
    },
    addPlan(index, row) {
      this.dialogFalg = true
      this.editInfo = row||{orgId:this.formInline.orgIds}
    },
    delPlan(index, row) {
      let that = this
      this.$confirm("确定删除？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        roundButton: true
      }).then(() => {
        delEmergencyPlan({planId: row.id}).then(res => {
          if( res.status === 200) {
            that.$message({
              type: 'success',
              message: '删除成功!'
            })
            that.getList(1, 10, true)
          }else{
            that.$message.error(res.info)
          }
        })
      }).catch(() => {

      })
    },
    closeDialog(refresh) {
      this.dialogFalg = false
      if(refresh) {
        this.getList(this.editInfo.id?'':1, 10 , true)
      }
    },
  },
}
</script>
<style lang="scss">
.list-content {
  .detail-content {
    img {
      max-width: 100%;
    }
  }
}
</style>